<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    div {
      width: 300px;
      height: 100px;
      background-color: green;
    }

    p {
      width: 200px;
      height: 100px;
      background-color: pink;
      color: green;
    }

    .box {
      width: 200px;
      height: 100px;
    }

    .box span {
      background-color: red;
    }
    img{
      width: 400px;
      height: 300px;
    }
  </style>

</head>

<body>
  <div class="">
    div元素
  </div>
  <p>p元素</p>

  <div>
    <p></p>
  </div>
  <hr>
  <span>行元素不能直接定义宽 高 </span>
  <br>
  <span>行元素span</span>
  <a href="#">行元素a</a>
  <strong>行元素strong</strong>
  <div class="box">
    <span>利用box设置span宽 高</span>
  </div>
  <hr>
  <span>行内块元素</span>
  <br>
  <img src="images/1.png" alt="">
  <img src="images/a.jpg" alt="芦田爱菜">

</body>

</html>
